<template>
<!--  <el-form-item label="OSS">-->
<!--    <template #label>-->
<!--      <el-link-->
<!--        :underline="false"-->
<!--        href="https://avuejs.com/form/form-upload.html#%E9%98%BF%E9%87%8C%E4%BA%91oss%E4%B8%8A%E4%BC%A0"-->
<!--        target="_blank"-->
<!--      >-->
<!--        oss-->
<!--        <el-icon>-->
<!--          <question-filled />-->
<!--        </el-icon>-->
<!--      </el-link>-->
<!--    </template>-->
<!--    <el-select v-model="data.oss" placeholder="oss不写则为普通上传" clearable style="width: 100%" >-->
<!--      <el-option label="默认" value="def"></el-option>-->
<!--      <el-option label="阿里" value="ali"></el-option>-->
<!--      <el-option label="七牛" value="qiniu"></el-option>-->
<!--    </el-select>-->
<!--  </el-form-item>-->
  <el-form-item label="上传地址" v-if="!data.oss" style="display: none;">
    <el-input v-model="data.action" clearable placeholder="上传地址" ></el-input>
  </el-form-item>
  <el-form-item label="接受文件类型" label-width="110px">
<!--        <el-select v-model="data.accept" placeholder="oss不写则为普通上传" clearable style="width: 100%" >-->
<!--          <el-option label="图片" value="image/png,image/jpg"></el-option>-->
<!--          <el-option label="文档" value="ali"></el-option>-->
<!--          <el-option label="所有" value="qiniu"></el-option>-->
<!--        </el-select>-->
    <el-input v-model="data.accept" clearable placeholder="接受文件类型，如：image/png,image/jpg"></el-input>
  </el-form-item>
  <el-form-item label="是否拖拽上传" label-width="110px">
    <el-switch v-model="data.drag"></el-switch>
  </el-form-item>
  <el-form-item label="文件列表类型" label-width="110px" v-if="!data.drag">
    <el-select v-model="data.listType" placeholder="文件列表类型" clearable>
      <el-option label="附件" value="text"></el-option>
      <el-option label="照片墙" value="picture-card"></el-option>
      <el-option label="头像" value="picture-img"></el-option>
      <el-option label="缩略图" value="picture"></el-option>
    </el-select>
  </el-form-item>
  <div class="el-form--label-top" style="display: none;">
    <div class="el-form-item">
      <label class="el-form-item__label" style="padding: 0;">参数设置：</label>
      <div>
        <h4>请求头</h4>
        <avue-dynamic v-model="data.headersConfig" :children="option"></avue-dynamic>
        <h4>请求体</h4>
        <avue-dynamic v-model="data.dataConfig" :children="option"></avue-dynamic>
      </div>
    </div>
    <div class="el-form-item">
<!--      <label class="el-form-item__label" style="padding: 0;">-->
<!--        <el-link :underline="false" href="https://avuejs.com/form/form-upload.html" target="_blank">-->
<!--          上传参数设置-->
<!--          <el-icon>-->
<!--&lt;!&ndash;            <question-filled></question-filled>&ndash;&gt;-->
<!--          </el-icon>-->
<!--        </el-link>-->
<!--      </label>-->
      <div>
        <h4>上传成功返回结构体的图片地址</h4>
        <el-input v-model="data.propsHttp.url" placeholder="上传成功返回结构体的图片地址"></el-input>
        <h4>上传成功返回结构体的图片的名称</h4>
        <el-input v-model="data.propsHttp.name" placeholder="上传成功返回结构体的图片的姓名"></el-input>
        <h4>返回结构体的层次</h4>
        <el-input v-model="data.propsHttp.res" placeholder="返回结构体的层次"></el-input>
        <h4>文件名称</h4>
        <el-input v-model="data.propsHttp.fileName" placeholder="文件名称，默认file"></el-input>
      </div>
    </div>
  </div>
  <el-form-item label="是否显示已上传文件列表" label-width="180px">
    <el-switch v-model="data.showFileList"></el-switch>
  </el-form-item>
  <el-form-item label="文件大小">
    <el-input-number
      v-model="data.fileSize"
      controls-position="right"
      placeholder="文件大小限制（字节）"
      :min="0"
      style="width: 100%;"
    ></el-input-number>
  </el-form-item>
  <el-form-item label="上传限制提示" label-width="110px">
    <el-input v-model="data.tip" clearable placeholder="上传限制提示"></el-input>
  </el-form-item>
  <el-form-item label="上传中提示" label-width="110px">
    <el-input v-model="data.loadText" clearable placeholder="上传中提示"></el-input>
  </el-form-item>
  <el-form-item label="是否多文件上传" label-width="130px">
    <el-switch v-model="data.multiple"></el-switch>
  </el-form-item>
  <el-form-item v-if="data.multiple" label="多文件数量限制" label-width="130px">
    <el-input-number
      v-model="data.limit"
      controls-position="right"
      placeholder="多文件上传数量限制"
      :min="1"
      style="width: 100%;"
    ></el-input-number>
  </el-form-item>
  <el-form-item label="水印配置，开启后只能上传图片" label-width="230px">
    <el-switch v-model="data.showCanvas"></el-switch>
  </el-form-item>
  <div class="el-form--label-top">
    <div class="el-form-item" v-if="data.canvasOption">
      <label class="el-form-item__label" style="padding: 0;">水印设置：</label>
      <div>
        <h4>水印文字</h4>
        <el-input v-model="data.canvasOption.text" clearable placeholder="水印文字"></el-input>
        <h4>字体类型</h4>
        <el-input v-model="data.canvasOption.fontFamily" clearable placeholder="字体类型"></el-input>
        <h4>字体颜色</h4>
        <avue-input-color v-model="data.canvasOption.color" placeholder="字体颜色"></avue-input-color>
        <h4>字体大小</h4>
        <el-input-number
          v-model="data.canvasOption.fontSize"
          controls-position="right"
          placeholder="字体大小"
        ></el-input-number>
        <h4>文字的透明度</h4>
        <el-input-number
          v-model="data.canvasOption.opacity"
          controls-position="right"
          placeholder="文字的透明度"
          :step="10"
          :min="10"
          :max="100"
        ></el-input-number>
        <h4>文字距离图片底部的距离</h4>
        <el-input-number
          v-model="data.canvasOption.bottom"
          controls-position="right"
          placeholder="文字距离图片底部的距离"
        ></el-input-number>
        <h4>文字距离图片右边的距离</h4>
        <el-input-number
          v-model="data.canvasOption.right"
          controls-position="right"
          placeholder="文字距离图片右边的距离"
        ></el-input-number>
        <h4>压缩图片比率</h4>
        <el-input-number
          v-model="data.canvasOption.ratio"
          controls-position="right"
          placeholder="压缩图片比率"
          :step="0.1"
          :min="0"
          :max="1"
        ></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
// import { QuestionFilled } from '@element-plus/icons-vue'
export default {
  name: "config-upload",
  props: ['data'],
  // components: { QuestionFilled },
  data() {
    return {
      option: {
        column: [{
          type: 'input',
          prop: 'key',
          label: 'key'
        }, {
          type: 'input',
          prop: 'value',
          label: 'value'
        }]
      },
    }
  },
  watch: {
    'data.drag': function (val) {
      if (val) delete this.data.listType
    },
    'data.showCanvas'(val) {
      if (val) {
        this.data.canvasOption = {}
        this.data.accept = 'image/*'
      } else {
        delete this.data.canvasOption
      }

    }
  }
}
</script>
<style scoped>
:deep(h4) {
  margin: 10px 0 0 0;
}
</style>
